import { createRouter, createWebHistory } from 'vue-router'

// 强制使用动态导入确保组件被包含在构建中
const HomeView = () => import('../views/HomeView.vue')
const AboutView = () => import('../views/AboutView.vue')
const BigScreenView = () => import('../views/BigScreenView.vue')
const LeftOne = () => import('../components/LeftOne.vue')
const RtspHls = () => import('../views/RtspHls.vue')

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
      meta: {
        title: 'Home'
      }
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    },
    {
      path: '/bigScreen',
      name: 'bigScreen',
      component: BigScreenView,
      props: { t: null }
    },
    {
      path: '/leftOne',
      name: 'leftOne',
      component: LeftOne
    },
    {
      path: '/rtspHls',
      name: 'rtspHls',
      component: RtspHls
    },
    // 添加重定向确保任何未匹配的路径都重定向到首页
    // {
    //   path: '/:pathMatch(.*)*',
    //   redirect: '/'
    // }
  ]
})

// 添加路由守卫确保路由被使用
router.beforeEach((to, from, next) => {
  console.log('路由导航:', to.path)
  next()
})

// 导出路由实例并添加导航到首页的功能
// 在Vue Router 4中，我们会在main.js中处理初始导航
const routerWithInitialNavigation = {
  ...router,
  // 提供一个方法让应用初始化时调用
  navigateToHome: function () {
    if (!this.currentRoute.value.matched.length) {
      this.push('/').catch((err) => {
        // 忽略导航重复的错误
        if (!err.message.includes('NavigationDuplicated')) {
          console.error('Failed to navigate to home:', err)
        }
      })
    }
  }
}

export default routerWithInitialNavigation